<template>
  <div class="common-question">
    <div class="block" v-for="(question, index) in questionList" :key="index">
      <div class="question">{{ question.question }}</div>
      <div class="answer">{{ question.answer }}</div>
    </div>
  </div>
</template>

<script>
import { fetchCommonQuestion } from '@/api'

export default {
  data () {
    return {
      questionList: []
    }
  },

  async created () {
    this.questionList = await fetchCommonQuestion()
  }
}
</script>

<style lang="less" scoped>
@import "../../styles/variable.less";

.common-question {
  border: 1px solid @border-color2;
  padding: 0px 50px 20px;
  .block {
    font-size: 14px;
    margin-top: 32px;
    .question {
      padding-bottom: 8px;
    }
    .answer {
      color: @font-color-grey;
    }
  }
}
</style>
